<template>
  <div class="pagination-container">
    <!-- 分页信息 -->
    <div class="pagination-info">
      <span class="info-text">第 {{ currentPage }} 页</span>
      <span v-if="totalPages > 0" class="info-text">共 {{ totalPages }} 页</span>
    </div>
    
    <!-- 分页按钮 -->
    <button 
      class="pagination-btn" 
      :class="{ disabled: !hasPrev }"
      @click="goToPreviousPage"
      :disabled="!hasPrev"
    >
      <span class="arrow">←</span>
      <span class="text">上一页</span>
    </button>
    
    <button 
      class="pagination-btn" 
      :class="{ disabled: !hasNext }"
      @click="goToNextPage"
      :disabled="!hasNext"
    >
      <span class="text">下一页</span>
      <span class="arrow">→</span>
    </button>
    
    <button 
      class="pagination-btn" 
      @click="goToFirstPage"
    >
      <span class="text">首页</span>
    </button>
    
    <!-- 最后一页提示 -->
    <div v-if="!hasNext && totalPages > 0" class="last-page-tip">
      <span class="tip-text">已经到最后一页啦</span>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  currentPage: number
  totalPages: number
  hasNext?: boolean
  hasPrev?: boolean
}

interface Emits {
  (e: 'page-change', page: number): void
  (e: 'next-page'): void
  (e: 'prev-page'): void
  (e: 'first-page'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const goToPreviousPage = () => {
  if (props.hasPrev !== false) {
    emit('prev-page')
  }
}

const goToNextPage = () => {
  if (props.hasNext !== false) {
    emit('next-page')
  }
}

const goToFirstPage = () => {
  emit('first-page')
}
</script>

<style scoped lang="scss">
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0 1rem;
  position: relative;
  flex-wrap: wrap;
}

.pagination-info {
  display: flex;
  gap: 1rem;
  margin-right: 1rem;
  
  .info-text {
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
  }
}

.pagination-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  color: #666;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.1);

  &:hover:not(.disabled) {
    background: #e8e8e8;
    border-color: #d0d0d0;
    transform: translateY(-0.0625rem);
  }

  &:active:not(.disabled) {
    transform: translateY(0);
  }

  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f0f0f0;
    color: #999;
    
    &:hover {
      transform: none;
      background: #f0f0f0;
    }
  }

  .arrow {
    font-size: 1rem;
    font-weight: bold;
  }

  .text {
    font-weight: 500;
  }
}

.last-page-tip {
  position: absolute;
  top: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 1.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: 0 0.25rem 0.75rem rgba(255, 107, 107, 0.3);
  animation: tipFadeIn 0.3s ease-out;
  
  .tip-text {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    
    &::before {
      content: '🎯';
      font-size: 0.875rem;
    }
  }
}

@keyframes tipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pagination-container {
    gap: 0.75rem;
    flex-direction: column;
  }
  
  .pagination-info {
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
  
  .pagination-btn {
    padding: 0.625rem 1rem;
    font-size: 0.6875rem;
  }
  
  .last-page-tip {
    top: -2rem;
    font-size: 0.6875rem;
    padding: 0.375rem 0.75rem;
  }
}
</style>
